import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Text,
  ScrollView
} from 'react-native'
import Carousel from 'react-native-snap-carousel'
import PropTypes from 'prop-types'
import { ScaleS, WIDTH, IS_IOS, ScaleT } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import NavigationUtil from 'src/utils/NavigationUtil'
import CustomBoxShadow from 'src/components/boxshadow/CustomBoxShadow'
import CustomTextEllipsize from '../../../../components/custom-text-ellipsize/index'
import Swiper from 'react-native-swiper'
import { ONE_PIXEL } from '@/utils/ScreenUtil'
import { getUserAvatorLocalB, unitList } from 'src/utils/ConfigUtil'
import DefaultImage from 'src/components/image/DefaultImage'
import { utilToKilo } from 'src/utils/TimeUtil'

const sliderWidth = ScaleS(374)
const sliderHeight = ScaleS(182)
const itemWidth = ScaleS(150)
const itemHeight = ScaleS(48)
const containerHeight = ScaleS(108)
export const FamousSwiperHeight = itemHeight + ScaleS(78)

export default class FamousSwiper extends Component {
  static propTypes = {
    swipers: PropTypes.array
  }

  constructor (props) {
    super(props)
    const { swipers = [] } = props
    this.state = {
    }
  }

  static defaultProps = {
    swipers: []
  }

  render () {
    const { swipers } = this.props
    return (
      <View style={styles.container}>
        {/* <View style={styles.containerShadow}> */}
        <ScrollView
          style={styles.scrollView}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
        >
          <View style={styles.scrollContainer}>
            {swipers.map((item, index) => this._renderItemSwiper({ item, index }))}
          </View>
        </ScrollView>
        {/* </View> */}
      </View>
    )
  }

  _renderItemSwiper = ({ item, index }) => {
    const { posts = [] } = item
    return (
      <CustomBoxShadow key={index} style={styles.scrollItem}>
        <CustomButton
          style={styles.sliderBtn}
          params={item}
          onPress={this.itemClick}
        >
          <View style={styles.imgContainer}>
            <View style={styles.titConter}>
              <CustomTextEllipsize style={styles.simpleName} text={item.simpleName} />
              <CustomTextEllipsize style={styles.slogan} text={`${item.lookCount}人浏览`} />
            </View>
            <CustomImage style={styles.img} source={{ uri: item.logo }} />
          </View>
          {posts && posts.length > 0 &&
            <Swiper
              removeClippedSubviews={!IS_IOS}
              style={styles.wrapper}
              autoplay={true}
              loop
              horizontal={false}
              showsPagination={false}
              autoplayTimeout={3}>
              {posts.map(this.renderItem)}
            </Swiper>}
        </CustomButton>
      </CustomBoxShadow>
    )
  }

  renderItem = (item, index) => {
    const { bossInfo = {}, salary, name } = item
    const unit = item ? unitList[item.unit ? item.unit : item.settlementMethod * 1 + 1] : {}
    const salaryUnit = salary > 10000 ? '·' + unit : '元·' + unit
    return (
      <View key={item.id} style={styles.slideItem}>
        <View style={styles.slideItemLeft}>
          <DefaultImage
            style={styles.bossImg} source={{ uri: bossInfo.headImg }}
            errorSource={getUserAvatorLocalB()} />
          <CustomTextEllipsize style={styles.bossName} text={`${bossInfo.userName || ''}·${bossInfo.position || ''}`} />
          <CustomTextEllipsize style={styles.jobName} text={name || ''} />
        </View>
        <CustomTextEllipsize style={styles.slideItemRight} text={`${utilToKilo(salary)}${salaryUnit}`} />
      </View>
    )
  }

  allBtnClick = () => {
    NavigationUtil.navigate('FamousList')
  }

  itemClick = item => {
    NavigationUtil.navigate('CompanyHomepage', {
      companyId: item.companyId,
      famousDisplay: true
    })
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  containerShadow: {
    // flex: 1,
    width: ScaleS(335),
    height: containerHeight,
    backgroundColor: '#fff',
    borderRadius: ScaleS(10),
    shadowRadius: ScaleS(10)
  },
  scrollView: {
    flex: 1,
    paddingVertical: ScaleS(20)
  },
  scrollContainer: {
    flex: 1,
    flexDirection: 'row',
    paddingHorizontal: ScaleS(20)
  },
  scrollItem: {
    width: ScaleS(324),
    height: ScaleS(108),
    borderRadius: ScaleS(10),
    marginRight: ScaleS(10),
    backgroundColor: '#fff',
    shadowRadius: ScaleS(10),
    shadowOpacity: 0.7,
    shadowColor: '#E5E6EA',
    shadowOffset: {
      width: 0,
      height: 0
    }
  },
  sliderBtn: {
    flex: 1
  },
  imgContainer: {
    width: '100%',
    height: ScaleS(68),
    paddingHorizontal: ScaleS(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomColor: '#EBEBEB',
    borderBottomWidth: ONE_PIXEL,
    borderStyle: 'solid'
  },
  img: {
    width: ScaleS(47),
    height: ScaleS(47),
    resizeMode: 'cover',
    borderRadius: ScaleS(10)
  },
  titConter: {
    flexDirection: 'column',
    justifyContent: 'center'
    // width: ScaleS(128)
  },
  simpleName: {
    fontSize: ScaleT(14),
    fontWeight: '500',
    color: '#3C3C3C',
    lineHeight: ScaleS(21),
    marginBottom: ScaleS(8)
  },
  slogan: {
    fontSize: ScaleT(11),
    fontWeight: '500',
    color: '#818181',
    lineHeight: ScaleS(16)
  },
  line: {
    width: ScaleS(335),
    backgroundColor: 'rgba(151, 151, 151, 0.2)',
    height: ScaleS(1),
    marginHorizontal: ScaleS(20),
    marginTop: ScaleS(5)
  },
  wrapper: {
    // width: '100%',
    // height: ScaleS(40)
  },
  slideItem: {
    flex: 1,
    // width: '100%',
    // height: ScaleS(40),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: ScaleS(17)
  },
  slideItemLeft: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  bossImg: {
    width: ScaleS(20),
    height: ScaleS(20),
    borderRadius: ScaleS(10),
    marginRight: ScaleS(5)
  },
  bossName: {
    color: '#CCCCCC',
    fontSize: ScaleT(11),
    marginRight: ScaleS(8)
  },
  jobName: {
    flex: 1,
    color: '#3C3C3C',
    fontSize: ScaleT(11)
  },
  slideItemRight: {
    color: '#FED400',
    fontSize: ScaleT(11),
    fontWeight: '500'
  }
})
